<script setup lang="ts">
import Left from '@/views/HomeView/parts/Left.vue';
import LeftTop from '@/views/HomeView/parts/LeftTop.vue';
import Right from '@/views/HomeView/parts/Right.vue';
import RightTop from '@/views/HomeView/parts/RightTop.vue';
import * as echarts from 'echarts';
import { onMounted, useTemplateRef } from 'vue';

const homeViewRef = useTemplateRef<HTMLDivElement>('home-view');

const render = () => {
    const chart = echarts.init(
        homeViewRef.value!.querySelector('.chart') as HTMLElement,
    );

    chart.setOption({
        series: [
            {
                type: 'map',
                map: 'china',
                roam: true,
                scaleLimit: {
                    min: 0.8,
                    max: 4,
                },
                // 地图点击事件
                label: {
                    show: true,
                },
                // 
            },
        ],
    });

    window.addEventListener('resize', () => chart.resize());
};

onMounted(() => {
    // 判断是否 registerMap
    if (echarts.getMap('china')) {
        render();
    } else {
        fetch('https://geojson.cn/api/china/1.6.2/china.json')
            .then((res) => res.json())
            .then((geoJSON) => {
                echarts.registerMap('china', { geoJSON });
                render();
            });
    }
});
</script>

<template>
    <div class="home-view" ref="home-view">
        <div class="chart" />
        <LeftTop class="part" />
        <Left class="part" />
        <RightTop class="part" />
        <Right class="part" />
    </div>
</template>

<style lang="scss" scoped>
@use '@/style/global' as global;
@use 'sass:list';

.home-view {
    height: 100vh;
    position: relative;
    background-color: #ededed;

    .chart {
        height: 100%;
        width: 100%;
    }

    .part {
        position: absolute;
        height: 300px;
        width: 400px;
        box-shadow: global.$box-shadow;

        &.left-top {
            top: 20px;
            left: 20px;
        }
        &.left {
            bottom: 20px;
            left: 20px;
        }
        &.right {
            bottom: 20px;
            right: 20px;
        }
        &.right-top {
            top: 20px;
            right: 20px;
        }
    }
}
</style>
